<template>
	<view>
		<view class="image-list" v-if="imgList.length > 0">
			<template v-for="(item,index) in imgList">
				<view class="image-box" @click="itemClick(index)">
					<image class="img-sy" :src="item" :key="index" mode="aspectFill"></image>
					<!-- <m-icon wh="48" color="#999999" type="icon-shanchu1" /> -->
				</view>
			</template>
			<view v-if="imgList.length<length" @click="addPhoto" class="add-img flex-column flex-center">
				<m-icon wh="48" color="#999999" type="icon-jiahao"></m-icon>
			</view>
		</view>
		<view v-else @click="addPhoto" class="feedback_img flex-column flex-center">
			<m-icon wh="48" spa="0 0 20 0" color="#999999" type="icon-xiangji"></m-icon>
			<view class="ta-center">{{placeholder}}</view>
		</view>
	</view>
</template>

<script>
	import { Upload } from '@/api/Ctrls.js'
	import { Toast } from '@/utils/tools.js'
	export default {
		name: "uploadPhoto",
		data() {
			return {
				imgList: []
			};
		},

		props: {
			disabled: {
				type: Boolean,
				default: false,
			},
			value: {
				type: [Array, Object],
				default: () => [],
			},
			// 可上传图片张数 默认4张
			length: {
				type: Number,
				default: 4
			},
			// 说明提示
			placeholder: {
				type: String,
				default: () => {
					return '添加照片(选填)'
				}
			}
		},
		watch: {
			value(val) {
				if (val.length > 0) {
					this.imgList = val;

				}
			}
		},
		methods: {
			addPhoto(type) {

				if (this.disabled) return

				let that = this;
				if (this.imgList.length == 4) {
					Toast("最多允许添加4张图片");
					return;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: type == 1 ? ['camera'] : ['album'], //从相册选择
					success: async function({ tempFilePaths, tempFiles }) {
						uni.showLoading();
						tempFiles[0].FileName = tempFiles[0]['name'];
						// console.log(tempFiles)
						const { success, data, msg } = await Upload(tempFilePaths[0]);
						if (!success) {
							that.Toast(msg)
						}
						if (success) {
							that.imgList.push(data);
							that.$emit("input", that.imgList)
						}
						uni.hideLoading()
					}
				});

			},
			itemClick(index) {
				if (this.disabled) return
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片？',
					success: (res) => {
						if (res.confirm) {
							that.imgList = that.imgList.filter(item => {
								return item != that.imgList[index]
							})
							that.$emit("input", that.imgList)
						} else if (res.cancel) {
							console.log('点击了取消')
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.image-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 30rpx;
		margin: 20rpx 0;

		.image-box {
			position: relative;
			height: 170rpx;

			.img-sy {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}

			.mIcon {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
			}
		}
	}

	.feedback_img {
		padding: 20rpx 0;
		background: #fff;
		border-radius: 14rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 100%;
		height: 170rpx;
	}

	.add-img {
		background: #efefef;
		width: 100%;
		height: 170rpx;
		border-radius: 14rpx;

		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>